<template>
  <div>
    <div style="padding:5px">
      <p class="header">产品种类---添加</p>
      <el-divider />
      <div style="padding-right: 10;">
        <el-form ref="ruleForm" :model="tool" :rules="rules" size="mini" label-width="90px" class="demo-ruleForm">
          <el-form-item label="名称" prop="title">
            <el-input v-model="tool.title" />
          </el-form-item>
          <el-form-item label="顺序号" prop="orderBy">
            <el-input v-model="tool.orderBy" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
import { Add } from '@/api/product'
export default {
  data() {
    return {
      tool: {
        title: '',
        orderBy: 0
      },
      rules: {
        title: [
          { required: true, message: '请输入工具名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Add(this.tool).then(res => {
            if (res.success) {
              this.$message({
                message: '添加完成！',
                type: 'success'
              })
              this.tool.title = ''
              this.tool.orderBy = 0
              this.$emit('closedrawer')
              console.log('hell')
            }
          })
        } else {
          this.$message.error('出错啦！')
          return false
        }
      })
    },
    closeForm() {
    }
  }
}
</script>

<style scoped>
.header{
    font-size: 20px;

}
</style>
